<template>
	<div id="search-result" :class="{'lesson-result':type=='lesson'}" ref="searchResult">
		<div class="s-company"></div>
		<vue-data-loading :loading="loading" :completed="completed" :listens="['infinite-scroll','pull-down']" :init-scroll="true" @infinite-scroll="infiniteScroll" container="searchResult">
			<ul class="s-list">
				<!-- <li class="s-user">
	                <img src="exam.jpg" clas="s-head head-img">
	                <span class="s-head head-txt">菠菜</span>
	                <div class="s-info">
	                    <p>菠菜菜</p>
	                    <p>公司名称</p>
	                    <p>部门名称</p>
	                </div>
	            </li> -->
				<template v-if="type=='lesson'">
					<template v-if="result.length > 0">
						<li class="s-lesson-name" v-for="item in result" @click="sec(item.uuid,item.title, item)">{{item.title}}</li>
					</template>
					<li class="s-none" v-else>没有匹配到任何结果</li>
				</template>

				<template v-else>
					<template v-if="result.length > 0">
						<li class="s-user" v-for="item in result" @click="sec(item.uuid,item.name, item)">
			                <!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520849324579&di=794f8653a1a09075237e2e2ee8f0a36f&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201407%2F21%2F20140721183205_zULey.jpeg" class="s-head head-img"> -->
			               <!--  <span class="s-head head-txt">菠菜</span>
			               <div class="s-info">
			                   <p>菠菜菜</p>
			                   <p>公司名称</p>
			                   <p>部门名称</p>
			               </div> -->
			            </li>
					</template>
					<!-- <li class="s-none" v-else>没有匹配到任何结果</li> -->
					<template v-else>
						<li class="s-none" v-for="n in list">没有匹配到任何结果</li>
					</template>
					
				</template>
			</ul>
			<div slot="infinite-scroll-loading">加载中...</div>
			<div slot="completed">加载完毕</div>
		</vue-data-loading>
	</div>
</template>
<script>
import VueDataLoading from 'vue-data-loading'
export default {
	data() {
		return {
			result :['1'],	//搜索结果
			timer  :{},	//数据请求延迟函数
			loading:false,//控制是否可以加载
			completed:false,//是否记载完毕
			list:10,
		}
	},
	props: {
		// 要搜索的字符
		searchword: {
			type: String,
		},
		// 搜索展示类型
		type:{
			type:String,
			required:true
		}
	},
	components:{
		VueDataLoading
	},
	watch: {
		// 监听搜索关键字变化，500毫秒执行一次查询，避免频繁请求带来的性能问题
		searchword () {
			clearTimeout(this.timer);
			this.timer = setTimeout(()=> {
				this.showResult();
			},500)
		},
	},
	methods:{
		infiniteScroll (){
			this.loading = true
			console.log('666');
			setTimeout(()=>{
				this.list+=10;
				this.loading = false;

				if(this.list>50){
					this.completed = true;
					this.loading = false;
				}

			},500)
		},
		/*debounce (method,delay){
			
			var timer = null;
			return function(){
				var context = this,args = arguments;
				clearTimeout(timer);
				timer = setTimeout(function(){
					method.apply(context,args);
				},delay);
			}
		},*/
		// 请求查询数据
		showResult (){
			// alert('在这执行搜索赋值操作')

			// 数据为空时要置空
			this.result = []
			/*this.result = [
			    {
			        "uuid": "666",
			        "name": "前端组",
			    },
			   
			]*/
		},
		// 点击选择查询数据
		sec (uuid,name, item){
			let param = {
				uuid:uuid,
				name:name
			}
			// 选择某条数据后，触发父组件的记录方法
			this.$emit("triggerSelect",param,item)
		}
	},
	mounted() {
		console.log(typeof this.$refs.result);
	}
}

</script>
<style lang="less">
@import "./less/assign.less";
#search-result {
	/*background: #AEDDE3;*/
	z-index: 100;
}
.s-head {
    display: inline-block;
    width: 38px;
    /*height: 38px;*/
    border-radius: 50%;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}
.s-info {
    display: inline-block;
    padding: 0 0 0 5px;
    vertical-align: middle;
    width: 230px;
}
.s-info p:first-child {
    font-size: 14px;
    color: #000;
}
.s-info p {
    margin: 0;
    line-height: 1.3;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
